// 文本溢出省略
@mixin text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本溢出省略
@mixin multi-line-overflow($lines: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
}

// flex 布局
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 响应式布局
@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {
    @media (max-width: $breakpoint-xs) { @content; }
  }
  @else if $breakpoint == sm {
    @media (max-width: $breakpoint-sm) { @content; }
  }
  @else if $breakpoint == md {
    @media (max-width: $breakpoint-md) { @content; }
  }
  @else if $breakpoint == lg {
    @media (max-width: $breakpoint-lg) { @content; }
  }
  @else if $breakpoint == xl {
    @media (max-width: $breakpoint-xl) { @content; }
  }
}

// 滚动条样式
@mixin scrollbar($width: 6px) {
  &::-webkit-scrollbar {
    width: $width;
  }
  
  &::-webkit-scrollbar-track {
    background: var(--el-bg-color-page);
  }
  
  &::-webkit-scrollbar-thumb {
    background: var(--el-text-color-disabled);
    border-radius: $width / 2;
    
    &:hover {
      background: var(--el-text-color-secondary);
    }
  }
}

// 卡片阴影
@mixin card-shadow {
  box-shadow: var(--el-box-shadow-light);
  transition: box-shadow 0.3s ease;
  
  &:hover {
    box-shadow: var(--el-box-shadow);
  }
}

// 渐变背景
@mixin gradient-bg($start-color, $end-color, $direction: to right) {
  background: linear-gradient($direction, $start-color, $end-color);
}

// 毛玻璃效果
@mixin backdrop-blur($blur: 10px) {
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  background-color: rgba(255, 255, 255, 0.7);
} 